<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.5,minimum=1,maximum=1,user-scalable=no">
    <title>QQ音乐</title>
    <link rel="stylesheet" href="css/style.css" media="screen" title="no title">
    <link rel="stylesheet" href="font/iconfont.css" media="screen" title="no title">
    <style media="screen">
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    </style>
    <script type="text/javascript">
    //2、REM自适应算法
    var html = document.querySelector("html");
    html.style.fontSize = html.offsetWidth / 640 * 100 + "px";
    addEventListener("resize", function() {
        html.style.fontSize = html.offsetWidth / 640 * 100 + "px";
    }, false);
    </script>
</head>

<body>
    <div class="wrapper">
        <header class="header">
            <div class="iconfont xiala"></div>
            <div class="name">
                青春修炼手册
            </div>
            <div class="iconfont more"></div>
        </header>
        <div class="container">
            <p class="title">- TFBOYS -</p>
            <ul class="option">
                <li>标准</li>
                <li>独家</li>
                <li>MV</li>
                <li>dTS</li>
            </ul>
            <div class="box">
                <div class="inner">
                    <img src="img/img.jpg" alt="">
                    <audio id="ad" src="TFBOYS.mp3"></audio>
                </div>
                <div class="processbar" id="processbar">
                    <div id="played"></div>
                    <div id="ball"></div>
                </div>
                <div class="btn">
                    <div class="pre"><i class="iconfont font">&#xe60a;</i></div>
                    <div class="play" onclick="playPause()"><i class="iconfont font">&#xe603;</i></div>
                    <div class="next"><i class="iconfont font">&#xe60c;</i></div>
                </div>
                
                <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
                <script>
                var ad = document.getElementById("ad");
                var flag = true;
                function playPause() {
                    if (ad.paused) {
                        ad.play();
                        $(".play").find("i").html("||");
                        $(".inner").addClass("playandpause");
                    } else {
                        ad.pause();
                        $(".play").find("i").html("&#xe603;");
                        $(".inner").removeClass("playandpause")
                    }
                }

                var ball = document.getElementById("ball");
                var played = document.getElementById("played");
                ad.addEventListener('timeupdate', function() {
                    if (isDraging) {
                        return;
                    }
                    var left = ad.currentTime / ad.duration * 500 + 'px';
                    played.style.width = left;
                    ball.style.left = left;
                })

                var isDraging = false;
                $("#ball").on("touchstart", function(ev) {
                    var e = ev.originalEvent.changedTouches[0];
                    var x = e.clientX;
                    var ballLeft = ball.offsetLeft;
                    isDraging = true;
                    $(document).on("touchmove.aaa", function(ev) {
                        var e = ev.originalEvent.changedTouches[0];
                        var left = ballLeft + e.clientX - x;
                        if (left > 500) {
                            left = 0;
                        }
                        $("#ball").css("left", left + "px");
                        ad.currentTime = left / 500 * ad.duration;
                        ev.originalEvent.preventDefault();
                    });
                    $(document).on("touchend.aaa", function(ev) {
                        isDraging = false;
                        $(document).off(".aaa");
                    });
                });
                </script>
            </div>
        </div>
        <footer class="footer">
        <ul class="menu">
            <li><i class="iconfont font">&#xe609;</i></li>
            <li><i class="iconfont font">&#xe606;</i></li>
            <li><i class="iconfont font">&#xe605;</i></li>
            <li><i class="iconfont font">&#xe602;</i></li>
            <li><i class="iconfont font">&#xe607;</i></li>
        </ul>
        </footer>
    </div>
</body>

</html>
